<template>
  <div class="mange">
    <el-tabs v-model="activeName">
      <el-tab-pane label="审批配置" name="mange">
        <div class="form">
          <div class="Froms">
            <el-form ref="form" :rules="forms" :model="form" label-width="80px">
              <el-form-item label="审批类型">
                <el-select clearable  v-model="form.type" filterable placeholder="请选择">
                  <el-option
                    v-for="item in Typeoptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审批等级">
                <el-select clearable  v-model="form.level" filterable placeholder="请选择">
                  <el-option
                    v-for="item in Gradeoptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="审批人员">
                <el-select clearable 
                  v-model="value"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入名字"
                  :remote-method="remoteMethod"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="Submit('form')"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审批人员" name="person">
        <div class="form">
          <div class="Froms2">
            <el-tree :data="data" default-expand-all :props="defaultProps"
              ><span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    v-show="node.data.type ? true : false"
                    @click="() => remove(node, data)"
                  >
                    删除
                  </el-button>
                </span>
              </span></el-tree
            >
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  searchUsers,
  TreeUsers,
  configUsers,
  delRule,
} from "../../api/jurisdiction/index";
export default {
  data() {
    return {
      activeName: "mange",
      form: {
        type: "",
        level: "",
        user_ids: "",
      },
      personneloptions: [],
      list: [],
      states: [],
      data: [],

      value: "",
      Gradeoptions: [
        { id: "1", title: "一级" },
        { id: "2", title: "二级" },
        { id: "3", title: "三级" },
        { id: "4", title: "四级" },
        { id: "5", title: "五级" },
        { id: "6", title: "六级" },
        { id: "7", title: "七级" },
        { id: "8", title: "八级" },
      ],
      Typeoptions: [
        { id: "1", title: "案卷审批" },
        { id: "2", title: "借阅审批" },
      ],
      loading: false,
      forms: {
        type: "",
        grade: "",
      },
      defaultProps: {
        children: "children",
        label: "title",
      },
      delfrom: {
        type: "",
      },
    };
  },

  methods: {
    async remoteMethod(name) {
      this.loading = true;
      let res = await searchUsers({ name });
      console.log(res);
      if (res.data.code == 200) {
        this.loading = false;
      }
      this.states = res.data.data;
      this.list = this.states.map((item) => {
        return {
          value: item.id,
          label: `${item.nickname},${item.phone}`,
        };
      });
      console.log(this.list);
      if (name !== "") {
        setTimeout(() => {
          this.personneloptions = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(name.toLowerCase()) > -1;
          });
        }, 500);
      } else {
        this.user_ids = [];
      }
    },
    Submit(formName) {
      this.$loading();
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.form.user_ids = this.value;
          console.log(this.form);
          let res = await configUsers(this.form);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            this.$loading().close();
            this.$refs[formName].resetFields();
            this.loadData();
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
            this.$loading().close();
          }
        }
      });
    },
    async loadData() {
      let res = await TreeUsers();
      console.log(res);
      this.data = res.data.data;
    },
    remove(node, data) {
      // 显示loading
      this.$loading();
      console.log(node, data);
      this.delfrom.type = node.data.type;
      this.$confirm("确认删除？")
        .then(async (_) => {
          let res = await delRule(this.delfrom);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            this.loadData();
            this.$loading().close();
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
            this.$loading().close();
          }
        })
        .catch((_) => {});
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style lang="less" scoped>
.Froms {
  padding: 5px;
  /deep/.el-select {
    width: 250px;
  }
  .el-col-1 {
    margin-left: 160px;
  }
  .el-button--mini,
  .el-button--mini.is-round {
    padding: 11px 6px;
  }
}
.form {
  background-color: #fff;
  padding: 15px 15px 15px 0;
  border-radius: 5px;
}
.Froms2 {
  padding: 5px;
  .From2 {
    margin: 5px 0;
  }
}
.mange {
  display: flex;
  justify-content: space-evenly;
}
/deep/ .el-tree {
  font-size: 14px;
}
/deep/ .custom-tree-node {
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .nodeLabel {
    display: inline-block;
    width: calc(100% - 15px);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 9px;
    color: #3963fd;
  }
}
/deep/.el-tabs {
  width: 70%;
}
.el-upload__tip {
  margin-top: -3px;
}
/deep/.el-tabs__nav {
  width: 100%;
}
.el-upload__tip {
  margin-top: -3px;
}
/deep/.el-tabs__item {
  text-align: center;
  width: 50%;
}
.el-form-item {
  margin-bottom: 18px;
}
</style>